<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #big{
            width: 350px;
            height: 350px;
            background: darkcyan;
            margin: 0 auto;
            position: relative;
        }
        #box{
            position: absolute;
            width: 240px;
            height: 240px;
            background: rgb(226, 195, 137);
            opacity: 0.6;
            display: none;
        }
        #bigImg{
            position: absolute;
            width: 350px;
            height: 350px;
            background: cornflowerblue;
            left: 0%;
            top: 0;
            overflow: hidden;
            display: none;
        }
        #bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <input type="text" disabled>
    <div id="big">
        <div id="box"></div>
        <img src="../images/small.jpg" alt="">
        <div id="bigImg">
            <img src="../images/big.jpg" alt="" id="tu">
        </div>
    </div>
    <script>
        var big = document.getElementById("big")
        var box = document.getElementById("box")
        var tu = document.getElementById("tu")
        var bigImg = document.getElementById("bigImg")
        var bili = 240 / 800 
        big.onmouseenter = function(){
            box.style.display = "block"
            bigImg.style.display = "block"
        }
        big.onmouseleave = function(){
            box.style.display = "none"
            bigImg.style.display = "none"
        }

        big.onmousemove = function(e){
            //获取元素距边位置
            var obj = offset(big)
            //获取鼠标据变位置
            var x = e.pageX
            var y = e.pageY
            //计算差值 包括镜片的居中
            var resX = x - obj.left - box.clientWidth / 2 
            var resY = y - obj.top - box.clientHeight / 2 
            
            if(resX < 0){
                resX = 0
            }
            if(resX > big.clientWidth - box.clientWidth){
                resX = big.clientWidth - box.clientWidth
            }
            if(resY < 0){
                resY = 0
            }
            if(resY > big.clientHeight - box.clientHeight){
                resY = big.clientHeight - box.clientHeight
            }
            box.style.left = resX + "px"
            box.style.top = resY + "px"

            //放大镜
            tu.style.left = - resX / bili+ "px"
            tu.style.top = - resY / bili + "px"
        }
        
        //封装元素 距离视口顶层的距离
        function offset(dom){
            var left = 0;
            var top = 0
            while(dom != document.body){
                left += dom.offsetLeft + dom.clientLeft;
                top += dom.offsetTop + dom.clientTop;
                dom = dom.offsetParent
            }
            return {
                left:left,
                top:top
            }
        }
        // function offset(dom) {
        //     // 定义两个变量用于保存left和top
        //     var left = 0;
        //     var top = 0;

        //     // 循环 只要dom不是body元素就继续循环
        //     while (dom != document.body) {
        //         // 累加定位值和边框值
        //         left += dom.offsetLeft + dom.clientLeft;
        //         top += dom.offsetTop + dom.clientTop;
        //         // 将dom变量指向上一层元素
        //         dom = dom.offsetParent
        //     }

        //     return {
        //         left: left,
        //         top: top
        //     }
        // }
            
    </script>
</body>
</html>